<template>
  <el-dialog
    top="5vh"
    title="上传"
    :visible.sync="open"
    width="470px"
    destroy-on-close
    @close="close"
  >
    <div style="padding: 0 30px">
      <el-upload
        ref="upload"
        :action="action"
        name="multipartFile"
        multiple
        drag
        :file-list="fileList"
        :before-upload="beforeUpload"
        :on-success="onSuccess"
        :on-remove="onRemove"
        :on-error="onError"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <!--          <div slot="tip" class="el-upload__tip">上传类型：~~~</div>-->
      </el-upload>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="open = false">取 消</el-button>
      <el-button type="primary" size="small" @click="addPath">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { baseURL } from '@/utils/request'
import { getToken } from '@/utils/auth'

export default {
  name: 'CuUpload',
  data() {
    return {
      path: '',
      open: false,
      fileList: [],
      relevanceId: '',
      fileCategory: ''
    }
  },
  computed: {
    action() {
      return baseURL + this.path + '?token=' + getToken()
    }
  },
  methods: {
    close() {
      this.fileList.length = 0
    },
    showDialog(relevanceId, fileCategory) {
      switch (fileCategory) {
        case '0':
          this.path = '/lawArticle/ImgAndAccessory'
          break
        case '1':
          this.path = '/warnEvent/uploadingAccessory'
          break
        case '2':
          this.path = '/enterprise/uploadingAccessory'
          break
      }
      this.open = true
      this.relevanceId = relevanceId
      this.fileCategory = fileCategory
    },
    beforeUpload(file) {

    },
    onSuccess(response, file, fileList) {
      if (response.code === 200) {
        this.fileList = fileList
      } else if (response.code === 401) {
        const fileType = file.name.split('.').slice(-1).join()
        this.msgError('暂不支持' + fileType + '格式')
      } else {
        this.msgError(file.name + '上传失败')
      }
    },
    onRemove(file, fileList) {
      this.fileList = fileList
    },
    // eslint-disable-next-line handle-callback-err
    onError(err, file, fileList) {
      this.msgError(file.name + '上传失败')
    },
    addPath() {
      if (this.fileList.length === 0) {
        this.msgInfo('请选择上传文件')
        return
      }
      this.fileList.forEach(file => {
        const res = file.response.data
        const params = {
          relevanceId: this.relevanceId,
          fileCategory: this.fileCategory,
          name: file.name,
          path: res.path,
          fileType: res.fileType,
          fileSize: res.fileSize
        }
        this.$http.post('/sysPath/addPath', params).then(response => {
          if (response.code === 200) {
            this.msgSuccess(file.name + '保存成功')
            this.open = false
          } else {
            this.msgError(file.name + '保存失败')
            this.open = false
          }
        })
      })
    }
  }
}
</script>
<style scoped>
  ::v-deep .el-dialog__header {
    padding: 15px;
    border-bottom: 2px solid #ff841c;
  }
</style>
